<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 
			关于VueComponent:
				1.schoo1组件本质是一个名为Vuecomponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
				
				2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象,
					即Vue带我们执行的:new VueComponent(options)。
				
				3.特别注意:每次调用Vue.extend，返回的都是一个全新的Vuecomponent!!!!
			
				4.关于this指向:
					(1).组件配置中:
							data函数、methods中的兩数、watch中的函数、computed中的兩数 它们的this均是【Vuecomponent实例对象】
							
					(2).new Vue(options)配置中:
							data兩数、methods中的函数、watch中的兩数、computed中的所数 它们的this均是【vue实例对象】
						
				5.VueComponent的实例对象，以后简称vc(也可称之为:组件实例对象)。
				  Vue的实例对象，以后简称vm。
					
					注意：	因组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
								仅有的例外是像 e1 这样根实例特有的选项。
		 -->
	</head>
	<body>
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
		<script type="text/javascript">
			
			//调用一个Vue.extend返回一个VueComponent，那么，school和hello调用了Vue.extend,
			//返回的是同一个VueComponent吗？不是，是2个VueComponent;
			const school = Vue.extend({
				template:`
					<h1>{{schoolName}}</h1>
				`,
				data() {
					return {
						schoolName:"尚硅谷"
					}
				},
			})
			
			//hello组件
			const hello = Vue.extend({
				template:`
					<h1>你好{{hi}}</h1>
				`,
				data() {
					return {
						hi:"尚硅谷"
					}
				},
			})
			//这个school到底是什么，打印看一下；
			/* 
				打印出来的是这个,这其实是个构造函数；
				@@ ƒ VueComponent(options) {
											this._init(options);
			    }
			 */
			console.log("@@",school)
			console.log("是同一个VueComponent?",hello ==  school)  //返回false
			
			
			const vm = new Vue({
				el:"#root",
				components : { school,hello }
			})
		</script>
	</body>
</html>